<template>
  <div class="width-100-per height-100-per">
    <div class="layout-right-center width-100-per margin-bottom-10-px">
      <div class="layout-side margin-right-10-px">
        <span class="margin-right-5-px">标题</span>
        <a-input class="formInput margin-right-5-px" ></a-input>
      </div>
      <div class="layout-side margin-right-10-px">
        <span class="margin-right-5-px">时间</span>
        <a-range-picker style="width: 250px" @change="onChangeTime" />
      </div>
      <a-button-group>
        <a-button icon="search" @click="selectRepaired">查询</a-button>
        <a-button icon="reload" @click="removeRepaired">清空</a-button>
      </a-button-group>
    </div>
    <div class="width-100-per">

      <!--    :rowSelection="rowSelection"-->
      <a-table
        :locale="{emptyText:'暂无数据'}"
        :rowKey="record => record.key"
        :columns="columns"
        :dataSource="repairedData"
        :pagination="paginationUser"
      >
      <span slot="tags" slot-scope="tags">
        <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
      </span>
        <span slot="action" slot-scope="text, record">
        <a @click="onViewClick(record.key)">查看</a>
          <template v-if="userType === '2'">
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除该设备？" placement="topRight" @confirm="onDeleteClick(record.key)">
              <a @click="">删除</a>
            </a-popconfirm>
          </template>
      </span>
      </a-table>
    </div>
  </div>
</template>

<script>
  import {Input, Button, Table, Tag,Icon,Divider,Popconfirm,DatePicker} from 'ant-design-vue'
  import {indexConfig} from "./IndexConfig";
  import {pagination} from "../../lib/utils";

  export default {
    name: "Repaired",
    components: {
      ARangePicker:DatePicker.RangePicker,
      ATable: Table,
      ATag: Tag,
      ADivider: Divider,
      AIcon: Icon,
      AButton: Button,
      AButtonGroup: Button.Group,
      AInput:Input,
      APopconfirm:Popconfirm,
    },
    data(){
      return{
        userType:'0',
        repairedData:[],
        columns:indexConfig.columns02,
        repLocationData:indexConfig.repLocationData,
        repTypeIdData:indexConfig.repTypeIdData,
        paginationUser:pagination(this.changePage,this.showSizeChange),
      }
    },
    mounted(){
      this.userType = JSON.parse(this.$store.getters.currentUser).type;
      console.log('已维修1')
      this.showTableRepaired()
    },
    methods:{
      //删除
      onDeleteClick(e){
        this.$apollo.mutate({
          mutation:require('../../graphql/repair/mutation/deleteRepairById.gql'),
          variables:{id:e}
        }).then((data)=>{
          this.showTableRepaired();
          this.$message.success("删除成功！")
        }).catch((error)=>{
          console.log(error)
        })
      },
      //初始化加载
      showTableRepaired(){
        const that = this;
        that.repairedData = [];
        that.$apollo.query({
          query:require('../../graphql/repair/query/findAllByRepState.gql'),
          variables:{repState:"2"},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findAllByRepState = data.data.findAllByRepState;
          for(let i in findAllByRepState){
            const repTypes=[];
            const loctions = [];
            for(let j in that.repTypeIdData){
              if(findAllByRepState[i].repTypeId === that.repTypeIdData[j].key){
                repTypes.push(that.repTypeIdData[j].title);
              }
            }
            for(let j in that.repLocationData){
              if(findAllByRepState[i].loctionId === that.repLocationData[j].key){
                loctions.push(that.repLocationData[j].title);
              }
            }
            that.repairedData.push({
              key:findAllByRepState[i].id,
              title:findAllByRepState[i].repCode,
              repTypeId:repTypes[0],
              loctionId:loctions,
              repEndTime:findAllByRepState[i].repEndTime,
            })
          }

        }).catch((error)=>{
          console.log(error);
        })
      },
      //已维修详情，跳转维修评价页面
      onViewClick(e){
        this.routerSkip("/repairDetails",{id:e})

      },
      //选择每页多少条后回调
      showSizeChange(current,pageSize){
        this.changePage(current,pageSize)
      },
      //点击页码回调
      changePage(current,pageSize){
        const that = this;
        that.paginationUser.defaultPageSize = pageSize;
        that.paginationUser.current = current;
      },
      //时间
      onChangeTime(date, dateString) {
        console.log(date, dateString);
      },
      //查询
      selectRepaired(){
        console.log('查询');
      },
      //清空
      removeRepaired(){
        console.log('清空');
      },
    }
  }
</script>

<style scoped>

</style>
